<template>
    <div>
        <Modal
                v-model="modal"
                title="确认操作"
                width="20"
                @on-ok="handleSubmit">
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()"><Icon type="ios-arrow-back" /> 返回  </Button>
        <Card class="line-style" v-for="(item,index) in formCustomList" :key="index">
            <div class="line-wrap">
                <div class="line-main">
                    <Form :ref="'formCustom'+index" :model="item" :rules="ruleCustom" :label-width="100">
                        <Row>
                            <Col span="7">
                                <FormItem label="物资类型" prop="mid" >
                                    <Select v-model="item.mid" style="width:100%" placeholder="请选择物资类型">
                                        <Option v-for="item in nameList" :value="item.value" :key="item.value">{{ item.label
                                            }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <Form-Item label="当天数量" prop="quantity">
                                    <Input type="number" number v-model="item.quantity" placeholder="输入数量">
                                        <span slot="append">{{quantityUnit(item.mid)}}</span>
                                    </Input>
                                </Form-Item>
                            </Col>
                            <Col span="7">
                                <Form-Item label="供应商名称" prop="supplier">
                                    <Input type="text" v-model="item.supplier" placeholder="请输入供应商"/>
                                </Form-Item>
                            </Col>
                            <Col span="7">
                                <FormItem label="当天状态" prop="status">
                                    <Select v-model="item.status" style="width:100%" placeholder="请选择状态">
                                        <Option v-for="item in state" :value="item.id" :key="item.id">{{ item.label }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <Form-item label="上报日期" prop="imp_date">
                                    <DatePicker @on-change="dateChange" :options="options1"  :value="item.imp_date" format="yyyy-MM-dd" type="date"
                                                placeholder="选择上报日期"></DatePicker>
                                </Form-item>
                            </Col>
                        </Row>
                    </Form>
                    <div class="line-button" v-if="!showDetail">
                        <Button type="primary" @click="validateForm('formCustom'+index,index)">保存</Button>
                    </div>
                </div>
            </div>
        </Card>
        <Row justify="center" type="flex" style="margin-top: 10px" v-if="!showBackBtn">
            <Col>
                <Button type="success" @click="addLine()">添加</Button>
            </Col>
        </Row>
    </div>
</template>

<script>
import { insert, findList as findAllList, update, getTypeList } from '@/api/outbreak-management/material-security/material-procurement'
export default {
  data () {
    return {
      options1: { // 不可选今天之后的日期
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 控制保存按钮显隐
      showDetail: false,
      // 控制返回按钮显隐
      showBackBtn: false,
      // 提示框
      modal: false,
      nameList: [],
      state: [
        {
          id: 0,
          label: '在途'
        }, {
          id: 1,
          label: '入库'
        }, {
          id: 2,
          label: '已分配'
        }],
      formCustomList: [
        {
          mid: '',
          imp_date: '',
          quantity: 0,
          supplier: '',
          status: ''
        }
      ],
      ruleCustom: {
        quantity: [
          { required: true, type: 'number', message: '数量必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '数量范围0-99999999', trigger: 'blur' }
          // { validator: validateInt, trigger: 'blur' }
        ],
        mid: [
          { required: true, message: '物资类型必选', trigger: 'change' }
        ],
        supplier: [
          { required: true, message: '供应商名称必填', trigger: 'blur' }
        ],
        status: [
          { required: true, type: 'number', message: '状态必选', trigger: 'change' }
        ],
        imp_date: [
          { required: true, message: '上报日期必选', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    quantityUnit (mid) {
      if (mid) {
        return this.nameList.find(item => item.value === mid).remarks
      }
    },
    getSuppliesData () {
      getTypeList().then(({ data }) => {
        this.nameList = data.data
      })
    },
    dateChange (date) {
      this.formCustomList.forEach(item => {
        item.imp_date = date
      })
    },
    validateForm (name, index) {
      this.$refs[name][0].validate((valid) => {
        if (valid) {
          this.modal = true
          this.currentIndex = index
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    handleSubmit () {
      let requestData = this.formCustomList[this.currentIndex]
      if (requestData.id) {
        update(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
            this.modal = false
            this.currentIndex = ''
          } else {
            this.$Message.error('保存失败!')
          }
        })
      } else {
        insert(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
            this.modal = false
            this.currentIndex = ''
          } else {
            this.$Message.error('保存失败!')
          }
        })
      }
    },
    addLine () {
      this.formCustomList.push(
        {
          mid: '',
          imp_date: '',
          quantity: 0,
          supplier: '',
          status: ''
        })
    },
    isEditStatus () {
      if (this.$route.query && this.$route.query.imp_date) {
        console.log(this.$route.query.imp_date)
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.getEditData(this.$route.query.imp_date)
      }
    },
    getEditData (imp_date) {
      findAllList({ imp_date }).then(({ data }) => {
        let { errcode, data: res } = data
        console.log(res)
        if (errcode === 0) {
          res.forEach(item => {
            item.imp_date = this.$common.moment(item.imp_date).format('YYYY-MM-DD')
            item.quantity = Number(item.quantity)
            item.status = Number(item.status)
          })
        }
        this.formCustomList = res
      })
    }
  },
  created () {
    this.getSuppliesData()
    this.isEditStatus()
  }
}
</script>

<style scoped lang="less">

</style>
